Marked 与 Markdown 有什么区别？该怎么选？

在前端开发中，我们常会遇到 Markdown 和 Marked 这两个词。它们名字相似，但并不是同一类东西，也不是互相替代的选项。

简单来说：

Markdown 是一种轻量级标记语言；Marked 是一个用于解析 Markdown 的 JavaScript 库。

理解这一点，就能知道它们通常不是“二选一”，而是配合使用。

什么是 Markdown？

Markdown 是一种用简单符号编写文本内容的语法。它可以表示标题、列表、链接、代码块等结构，常用于 README、技术文档、博客和评论内容。

例如：

        
# 页面标题

这是一段文字，包含**加粗内容**。

- 第一项
- 第二项

[访问示例网站](https://example.com)
        
      

Markdown 文件通常使用 .md 或 .markdown 后缀。它的重点是内容如何编写和组织，而不是由哪种编程语言处理。

什么是 Marked？

Marked 是一个 JavaScript Markdown 解析器。它可以读取 Markdown 文本，并将其转换为 HTML。

        
import { marked } from 'marked';

const source = '# 页面标题\n\n这是一段 **加粗内容**。';
const html = marked.parse(source);

console.log(html);
        
      

输出大致如下：

        
<h1>页面标题</h1>
<p>这是一段 <strong>加粗内容</strong>。</p>
        
      

Marked 关注的是如何在 JavaScript 项目中解析 Markdown。它常用于网站、Web 应用或 Node.js 服务中。

核心区别

可以把它们类比为：

• Markdown 像一种文章写作格式；

• Marked 像一个能够读懂这种格式并生成网页内容的转换工具。

实际开发中怎么选？

需要编写内容时，使用 Markdown

如果你要写项目说明、技术文档、博客文章或知识库内容，直接使用 Markdown 即可。它易读、易写，也方便进行版本管理。

需要在 JavaScript 中解析 Markdown 时，选择 Marked

如果项目需要把 Markdown 内容转换为 HTML，例如：

• 在前端展示 Markdown 文章；

• 在博客系统中渲染文章内容；

• 在后台或构建脚本中生成 HTML；

• 为 Markdown 编辑器提供预览功能；

就可以使用 Marked 等解析器。

两者通常一起使用

一个常见流程是：

        
Markdown 文本 → Marked 解析 → HTML → 页面展示
        
      

也就是说，内容使用 Markdown 编写，再由 Marked 将内容转换为网页可以展示的 HTML。

使用 Marked 时要注意安全

Marked 负责解析 Markdown，但不要默认认为它会过滤所有不安全的 HTML。如果 Markdown 内容来自用户输入，转换后的 HTML 可能包含恶意标签或脚本。

建议在插入页面前使用 HTML 清理工具，例如 DOMPurify：

        
import { marked } from 'marked';
import DOMPurify from 'dompurify';

const markdown = '# 文章标题\n\n这是一段内容。';
const html = marked.parse(markdown);
const safeHtml = DOMPurify.sanitize(html);

// 在框架模板中展示 safeHtml，具体方式取决于所用框架
        
      

是否需要清理，取决于内容来源和展示方式。对于用户提交的内容，通常应进行安全处理。

总结

Markdown 和 Marked 不是两个同类产品：

• Markdown 是编写内容的语法；

• Marked 是解析 Markdown 的 JavaScript 工具。

因此，选择时不必简单地在两者之间做取舍：写文档或文章时使用 Markdown；需要在 JavaScript 项目中解析这些内容时，再考虑使用 Marked。